<template>
  <el-card>
    <v-charts :options="options" />
  </el-card>
</template>

<script>
import VueEcharts from "vue-echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/legend";

import getData from "../../request/charts";
export default {
  components: {
    "v-charts": VueEcharts
  },
  data() {
    return {
      options: {
        title: {
          text: "月度销售业绩"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: 50,
          data: []
        },
        series: [
          {
            name: "月度销售业绩",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    };
  },
  created() {
    getData().then(list => {
      const xData = [];
      const yData = [];
      list.forEach(item => {
        xData.push(item.month + "月");
        yData.push({ value: item.total, name: item.month + "月" });
      });
      //   更新数据
      this.options = Object.assign(this.options, {
        legend: {
          data: xData
        },
        series: {
          data: yData
        }
      });
    });
  }
};
</script>

<style lang="less" scoped>
.echarts {
  width: 100% !important;
}
</style>